<template>
	<view class="big-box">
		<view class="background-box">
			<view class="head-big-box common">
				<view class="left-box-head" @tap="back">
					<image class="back-left-image" src="../../../static/jingjie/return.png"></image>
					<view class="head-left-title">境界</view>
				</view>
				<view class="left-box-head" @tap="toAll">
					<view class="head-left-title">全部</view>
					<image class="xiala-img" src="../../../static/jingjie/xialajiantou.png"></image>
				</view>
			</view>
			<view class="label-box">
				<view class="label-top-box">
					<view class="offer" v-show="curiosity.is_reward">
						<image src="../../../static/jingjie/offer.png"></image>
						<view class="number-box">{{curiosity.more_count}}币</view>
					</view>
					<view class="head-haoqi-title">
						<view class="haoqi-title textEllipsis">
							{{curiosity.content}}
							<text class="label-kuang">#{{type}}</text>
						</view>
					</view>
					<view class="user-box">
						<view class="user-img-box">
							<image :src="user.avatar"></image>
						</view>
						<view class="user_new-box">
							<view class="user_nickName">{{user.nick_name}}</view>
							<view class="money">{{time}}</view>
						</view>
					</view>
				</view>

				<view class="label-bottom-box common">
					<view class="mask-box"></view>
					<view class="oneBox border-radius1">
						<view class="small-top-box" @tap="getMyCurious">
							<image src="../../../static/jingjie/curious_h.png"></image>
							<view class="font-style">我也好奇</view>
						</view>
						<view class="small-bottom-box">{{curiosity.curiosity_count}}</view>
					</view>
					<view class="shuxian"></view>
					<view class="oneBox" @tap="toRespond">
						<view class="small-top-box">
							<image src="../../../static/jingjie/respond.png"></image>
							<view class="font-style">我来回应</view>
						</view>
						<view class="small-bottom-box">{{curiosity.viewpoint_count}}</view>
					</view>
					<view class="shuxian"></view>
					<!-- #ifdef APP-PLUS -->
					<view class="oneBox border-radius2">
						<view class="small-top-box">
							<image src="../../../static/jingjie/share.png"></image>
							<view class="font-style">分享</view>
						</view>
						<view class="small-bottom-box">{{curiosity.share_count}}</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="oneBox border-radius2">
						<view class="small-top-box">
							<button class="shareBtn" open-type="share" plain="true" style=" height:23px;border: none; background-clip: padding-box;" @tap="onShareAppMessage">
								<image class="shareImg" src="/static/jingjie/share.png"></image>
								<view class="shareText">分享</view>
							</button>
							<!-- <view class="font-style">分享</view> -->
						</view>
						<view class="small-bottom-box">{{curiosity.share_count}}</view>
					</view>
					
					<!-- <view class="small-box">
						<button open-type="share" plain="true" style=" width:23px; height:23px;border: none; background-clip: padding-box;" @tap="onShareAppMessage">
							<image class="shareImg" src="/static/jingjie/fenxiang.png"></image>
						</button>
						<text class="wenzi">{{videoDate.share_count}}</text>
					</view> -->
					<!-- #endif -->
					

				</view>
			</view>
		</view>
		<view class="select-tab" v-if="isShow">
			<view class="sanjiaox"></view>
			<view class="hidden-box">
				<view class="small-Box" @tap="toSee('all')">
					<image class="img1" src="../../../static/jingjie/all.png"></image>
					<view class="menu-title">全部</view>
				</view>
				<view class="small-Box" @tap="toSee('video')">
					<image class="img1" src="../../../static/jingjie/video.png"></image>
					<view class="menu-title">视频</view>
				</view>
				<view class="small-Box active" @tap="toSee('image')">
					<image class="img1" src="../../../static/jingjie/image.png"></image>
					<view class="menu-title">图片</view>
				</view>
			</view>
		</view>
		<view class="conent-big-box" v-for="(item,index) in curiousList" :key="index">
			<moreCurious :isImage="isImage" :isVideo="isVideo" :isdel="isdel" @toImgDetail="toImgDetail" @toVideoDetail="toVideoDetail"
			 :item="item"></moreCurious>
			<!-- <view class="bottom-box-fixed common">
				<view class="fixed-box">关注问题</view>
				<view class="lineBox"></view>
				<view class="fixed-box" @tap="publish()">发表观点</view>
			</view> -->
		</view>
		<view class="select-box" v-if="isFabu">
			<image class="img-size" src="../../../static/jingjie/elllipse.png"></image>
			<view class="common">
				<image @tap="Release('text')" class="fabu" src="../../../static/jingjie/fatuwen.png"></image>
				<image @tap="Release('video')" class="fabu" src="../../../static/jingjie/fashipin.png"></image>
			</view>
		</view>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	import moreCurious from '../../../components/moreCurious.vue'
	export default {
		components: {
			mask,
			moreCurious
		},
		data() {
			return {
				isShowMask: false,
				isShow: false, //是否显示下拉框
				isFabu: false,
				isImage: true,
				isVideo: true,
				isdel: false,
				id: '',
				curiousList: [],
				curiosity: {},
				user: {},
				time: '',
				type: '',
				classfiy: '', //类别
			};
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id)
		},
		onShow() {
			this.getData()
		},
		onShareAppMessage(){
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '分享',
				path: '/pages/test/test?id=123'
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toAll() {
				this.isShow = true;
				this.isShowMask = true;
			},
			toSee(type) { //选择查看
				var data = {};
				var me = this;
				if (type == 'all') { //查看所有
					this.isVideo = true;
					this.isImage = true;
					data = {
						id: this.id,
						oper_id: uni.getStorageSync('user_id'),
					}
				} else if (type == 'video') {
					this.isVideo = true;
					this.isImage = false;
					data = {
						style: 0,
						id: this.id,
						oper_id: uni.getStorageSync('user_id'),
					}
				} else if (type == 'image') {
					this.isImage = true;
					this.isVideo = false;
					data = {
						type: 'pic',
						id: this.id,
						oper_id: uni.getStorageSync('user_id'),
					}
				}
				this.isShow = false;
				this.isShowMask = false;
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosity',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res.data.data, '详情');
						var data = res.data.data[0];
						me.curiousList = data.map.viewpointEntities;
						if(me.curiousList==''){
							uni.showToast({
								title:'没有数据喽',
								icon:'none'
							})
						}
						me.curiosity = data;
						me.user = data.map.userinfo;
						me.time = data.create_time.substring(0, 10);
						me.type = data.map.classfiyInfo.type;
						me.classfiy = data.classfiy;

						console.log(me.curiosity)
					},
				})
			},
			closeMask() {
				this.isShow = false;
				this.isShowMask = false;
				this.isFabu = false;
			},
			publish() { //发表观点
				uni.navigateTo({
					url: '../../World/publishViewpoint/publishViewpoint'
				})
			},
			toRespond() { //回应
				this.isShowMask = true;
				this.isFabu = true;
			},
			Release(type) { //发布回应
				if (type == 'video') {
					uni.navigateTo({ //回应视频
						url: '../../World/releaseVideo/releaseVideo?id=' + this.id + '&classfiy=' + this.classfiy
					})
				} else if (type == 'text') { //回应图文
					uni.navigateTo({
						url: '../../World/releaseText/releaseText?id=' + this.id + '&classfiy=' + this.classfiy
					})
				}
				this.isShowMask = false;
				this.isFabu = false;
			},
			getData() {
				var data = {
					id: this.id,
					oper_id: uni.getStorageSync('user_id'),
					status:1
				}
				var me = this;
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosity',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						console.log(res.data.data, '详情');
						var data = res.data.data[0];
						me.curiousList = data.map.viewpointEntities;
						me.curiosity = data;
						me.user = data.map.userinfo;
						me.time = data.create_time.substring(0, 10);
						me.type = data.map.classfiyInfo.type;
						me.classfiy = data.classfiy;
						console.log(me.curiosity)
					}
				})
				// 				this.myAjaxNew({
				// 					model:'news',
				// 					controllerName: 'curiosityViewpoint',
				// 					actionName: 'queryListPage',
				// 					data: data,
				// 					successBack: function(res) {
				// 						console.log(res.data.data);
				// 						me.curiousList=res.data.data;
				// 					}
				// 				})
			},
			getMyCurious() { //加入我的好奇
				var me = this;
				var data = {
					history_id: this.id,
					user_id: uni.getStorageSync('user_id'),
					operation_type: 'curiosity',
					history_type: 'curiosity',
				};
				this.myAjaxNewPost({
					model: 'news',
					controllerName: 'history',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (me.curiosity.map.is_curiosity) {
							me.curiosity.map.is_curiosity = false
							me.curiosity.curiosity_count--
							if (me.curiosity.curiosity_count < 1) {
								me.curiosity.curiosity_count = 0
							}
						} else {
							me.curiosity.map.is_curiosity = true
							me.curiosity.curiosity_count++
						}
					}
				})
			},
			toVideoDetail() { //视频详情
				uni.navigateTo({
					url: '../../World/videoDetails/videoDetails'
				})
			},
			toImgDetail() { //图文详情
				uni.navigateTo({
					url: '../../World/ImgDetails/ImgDetails'
				})
			},
		}

	}
</script>

<style scoped>
	.big-box {
		width: 100%;
		height: 100%;
	}

	.background-box {
		width: 100%;
		height: 311upx;
		position: fixed;
		z-index: 999;
		background: linear-gradient(90deg, rgba(156, 133, 255, 1), rgba(97, 219, 247, 1));
	}

	.conent-big-box {
		position: relative;
		top: 485upx;
	}

	.head-box {
		padding: 0 24upx;
		padding-bottom: 40upx;
		padding-top: 40upx;
	}

	.user-box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 35upx;
	}

	.user-img-box {
		width: 68upx;
		height: 68upx;
	}

	.user-img-box image {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.user_new-box {
		margin-left: 10upx;
	}

	.user_nickName {
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
	}

	.money {
		font-size: 24upx;
		color: rgba(102, 102, 102, 1);
	}

	.anniu-box {
		width: 100%;
		margin-top: 23upx;
	}

	.bottom-box-fixed {
		width: 100%;
		height: 88upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0upx -1upx 0upx 0upx rgba(230, 230, 230, 1);
	}

	.fixed-box {
		width: 49%;
		font-size: 28upx;
		color: rgba(102, 102, 102, 1);
		text-align: center;
	}

	.lineBox {
		width: 1upx;
		height: 48upx;
		background: rgba(204, 204, 204, 1);
		margin-left: 6upx;
	}

	.left-box {
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}

	.title {
		font-size: 40upx;
		color: black;
		font-weight: bold;
	}

	.titleContent {
		font-size: 32upx;
		font-family: PingFang-SC-Medium;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-left: 13upx;
	}

	.margin {
		display: flex;
		align-items: center;
	}

	.dianzan-img {
		width: 175upx;
	}

	.dianzan-img image {
		width: 40upx;
		height: 40upx;
		background: rgba(245, 245, 245, 1);
		border: 1upx solid rgba(70, 206, 207, 1);
		border-radius: 50%;
	}

	.dianzan-num {
		font-size: 24upx;
		color: rgba(102, 102, 102, 1);
		margin-left: 19upx;
	}

	.anniu-right {
		width: 244upx;
		justify-content: space-between;
		display: flex;
	}

	.anniu {
		width: 112upx;
		height: 48upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 10upx;
		color: rgba(102, 102, 102, 1);
		font-size: 28upx;
		text-align: center;
		line-height: 48upx;
	}

	.head-big-box {
		width: 100%;
		height: 110upx;
		padding: 0 24upx;
		box-sizing: border-box;
		padding-top: 50upx;
		position: fixed;
		z-index: 11;
		padding-bottom: 10upx;
	}

	.left-box-head {
		height: 150upx;
		display: flex;
		align-items: center;
	}

	.anniu-box {
		width: 100%;
		margin-top: 23upx;
	}

	.left-box {
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}

	.left-box-head .back-left-image {
		width: 21upx;
		height: 36upx;
	}

	.left-box-head .head-left-title {
		font-size: 32upx;
		color: white;
		margin-left: 12upx;
	}

	.select-tab {
		width: 200upx;
		height: 260upx;
		border-radius: 10upx;
		position: fixed;
		right: 24upx;
		top: 128upx;
		z-index: 2222;
	}

	.sanjiaox {
		border-style: solid;
		border-width: 15upx 15upx 15upx 15upx;
		border-color: transparent transparent white transparent;
		width: 0upx;
		height: 0upx;
		position: absolute;
		right: 10upx;
		top: -27upx;
	}

	.hidden-box {
		width: 100%;
		height: 250upx;
		border-radius: 10upx;
		background-color: white;
	}

	.small-Box {
		height: 80upx;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		display: flex;
		padding: 29upx 48upx;
		box-sizing: border-box;
		align-items: center;

	}

	.small-Box.active {
		border: none;
	}

	.menu-title {
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 20upx;
	}

	.small-Box .img1 {
		width: 28upx;
		height: 28upx;
	}

	.small-Box .img2 {
		width: 28upx;
		height: 26upx;
	}

	.label-box {
		width: 702upx;
		height: 304upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
		margin: auto;
		position: relative;
		top: 148upx;
		box-shadow: #46CECF 0rpx 5rpx 29rpx 3rpx;

	}

	.label-top-box {
		width: 100%;
		height: 215upx;
		padding: 0 24upx;
		box-sizing: border-box;
		position: relative;
	}

	.label-bottom-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 88upx;
		background: linear-gradient(to left, #9c85ff, #61dbf7);
		border-radius: 0 0 20upx 20upx;
		z-index: 11;
	}

	.mask-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 88upx;
		border-radius: 0 0 20upx 20upx;
		background: rgba(255, 255, 255, .75);
		z-index: 22;
	}

	.oneBox {
		width: 234upx;
		height: 88upx;
		position: relative;
		z-index: 33;
	}

	.small-top-box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 13upx;
	}

	.small-top-box image {
		width: 26upx;
		height: 26upx;
		margin-right: 10upx;
	}
	.border-radius2 .small-top-box{
		margin-top: 4upx;
	}
	
	.shareBtn{
		display: flex;
		align-items: center;
	}
	.shareImg {
		width: 22upx;
		height: 22upx;
		/* position: absolute;
		left: 0upx;
		top: 0upx; */
	}
	.shareText{
		/* position: absolute;
		right: 0;
		top: 0; */
		font-size: 24upx;
	}

	.font-style {
		font-size: 24upx;
		color: rgba(102, 102, 102, 1);
	}

	.small-bottom-box {
		width: 100%;
		text-align: center;
		color: rgba(153, 153, 153, 1);
		font-size: 20upx;
		margin-top: 5upx;
	}

	.one-box.border-radius1 {
		border-radius: 0 0 20upx 0;
	}

	.one-box.border-radius2 {
		border-radius: 0 0 0 20upx;
	}

	.shuxian {
		width: 1upx;
		height: 88upx;
		background: rgba(255, 255, 255, 1);
		/* border: 1upx solid rgba(204, 204, 204, 1); */
	}

	.offer {
		width: 197upx;
		height: 164upx;
		position: absolute;
		top: 20upx;
		z-index: 222;
		right: 24upx;
	}

	.number-box {
		width: 62upx;
		height: 25upx;
		position: absolute;
		top: 80upx;
		right: 17upx;
		color: rgba(255, 255, 255, 1);
		font-size: 18upx;
		transform: rotate(12deg);
	}

	.offer image {
		width: 100%;
		height: 100%;
	}

	.head-haoqi-title {
		width: 100%;
		position: relative;
		top: 20upx;
		display: flex;
	}

	.haoqi-title {
		width: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: 34upx;
		font-weight: bold;
	}

	.label-kuang {
		width: 78upx;
		height: 32upx;
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 5upx;
		color: rgba(102, 102, 102, 1);
		font-size: 20upx;
		text-align: center;
		line-height: 32upx;
		padding: 0 12upx;
		margin-left: 10upx;
	}

	.small-Box .img3 {
		width: 28upx;
		height: 25upx;
	}

	.xiala-img {
		width: 24upx;
		height: 13upx;
		margin-left: 12upx;
	}

	.select-box {
		width: 100%;
		padding: 0 190upx;
		box-sizing: border-box;
		position: fixed;
		top: 230upx;
		z-index: 10000;
		text-align: center;
		line-height: 0upx;
	}

	.img-size {
		width: 264upx;
		height: 101upx;
	}

	.fabu {
		width: 120upx;
		height: 120upx;
	}
</style>
